<template>
  <div id="container"></div>
</template>

<script setup lang="jsx">
import { onMounted } from "vue";
import { Graph, Shape } from "@antv/x6";
// import { register } from "@antv/x6-vue-shape";
// import { Snapline } from "@antv/x6-plugin-snapline";

const data = {
  nodes: [
    {
      id: "node1",
      shape: "rect-node",
      x: 40,
      y: 40,
      label: "hello",
    },
    {
      id: "node2",
      shape: "rect-node",
      x: 100,
      y: 140,
      label: "world",
    },
  ],
  edges: [
    {
      shape: "edge",
      source: "node1",
      target: "node2",
      label: "x6",
      attrs: {
        body: {
          stroke: "#8f8f8f",
          strokeWidth: 1,
        },
      },
    },
  ],
};

onMounted(() => {
  Graph.registerNode("rect-node", {
    inherit: "rect", // 继承于 rect 节点
    width: 100,
    height: 40,
    markup: [
      {
        tagName: "rect",
        selector: "body",
      },
      {
        tagName: "image",
        selector: "imageBody",
      },
      {
        tagName: "text",
        selector: "label",
      },
    ],
    attrs: {
      body: {
        stroke: "#8f8f8f",
        fill: "#fff",
        strokeWidth: 1,
        rx: 6,
        ry: 6,
      },
      imageBody: {
        href: "/favicon.ico",
        width: 16,
        height: 16,
      },
    },

    tools: [
        {
            name: 'button-remove',
            args: {
                x: 0,
                y: 0
            }
        },
        {
            name: 'node-editor'
        }
    ],
    ports: {
      groups: {
        a: {
          attrs: {
            rectPort: {
              magnet: true,
              width: 5,
              height: 5,
              fill: "red",
            },
          },
            // position: 'right',
            // position: [10, 10],
          markup: [
            {
              tagName: "rect",
              selector: "rectPort",
            },
          ],
        },
      },
      items: [
        {
          group: "a",
        },
        {
          group: "a",
        },
      ],
    },
  });
  Shape.HTML.register({
    shape: "htmlNode",
    html() {
      const div = document.createElement("div");
      div.innerHTML = "我是一个html元素";
      div.className = "htmlDiv";
      return div;
    },
  });
  const graph = new Graph({
    container: document.getElementById("container"),
    width: 600,
    height: 400,
    background: {
      color: "#f2f7fa",
    },
  });
  //   graph.addNode({
  //     shape: 'htmlNode',
  //     x: 200,
  //     y: 200,
  //   })
  const nodeG = graph.fromJSON(data);
  setTimeout(() => {
    let node3 = nodeG.addNode({
        shape: 'htmlNode',
        x: 100,
        y: 100
    })
    node3.addPort({
        id: 'port1',
        attrs: {
            circle: {
                magnet: true
            }
        }
    })
    setTimeout(() => {
        node3.removePort('port1')
    }, 1000)
  }, 1000)
  graph.centerContent();
});
</script>

<style lang="less">
.rectStyle {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #8f8f8f;
  background: #fff;
  border-radius: 6px;
  position: relative;
}
.child {
  position: absolute;
  left: -100px;
}
.htmlDiv {
  width: 200px;
  height: 200px;
  background: pink;
}
</style>
